<template>
  <div class="sys_Node">
    <el-button
      size="mini"
      type="primary"
      @click="handleRefresh"
    >刷新节点</el-button>
    <el-table 
    :data="tableData" 
    v-loading = "loading"
    style="margin-top: 15px"
    border
    row-key="id"
    :tree-props="{children: 'sub'}"
    >      
      <el-table-column
        prop="id"
        label="id"
        min-width="100px"
        align="center"
      ></el-table-column>      
      <el-table-column
        prop="node"
        label="节点"
        min-width="130px"
      >
      </el-table-column> 
      <el-table-column
        prop="name"
        label="设置节点名称"
        min-width="200px"
        align="center"
      >
        <template slot-scope="scope">
          <el-input v-show="show" size="small" v-model="scope.row.title" style="width:100px"  @blur="handleNodeName(scope.row)" @keyup.native.enter="doblur"></el-input>
          <span v-show = "!show">{{ scope.row.title }}</span>
          <el-button v-show = "!show" type="success" @click='setNodeName()' size="mini" icon="edit">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="route_url"
        label="跳转地址"
        min-width="130px"
      >
      </el-table-column>
      <el-table-column prop="is_auth" label="是否加入节点权限" align="center" min-width="130px">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_auth"
            active-color="#5FB878"
            inactive-color="#ccc"
            :active-value= "1"
            :inactive-value="0"
            :active-text="scope.row.is_auth == 1?'加入':'取消'"
            :width="45"
            @change="changeStatus($event,scope.row.id)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop = "create_at"
        label = "创建时间"
        min-width="134px"
        align="center"
      >
      </el-table-column>
      <!-- <el-table-column prop="" label="操作" align="center" min-width="245px">
				<template slot-scope="scope">
					<el-button
						size="mini"
            type="primary"
            @click="handleAddMenu(scope.row)"
					>添加下级</el-button>
					<el-button
						size="mini"
						type="success"
            @click="handleEdit(scope.$index, scope.row)"
						>编辑</el-button>
					<el-button
						size="mini"
						type="danger"
            @click="handleDelete(scope.row)"
						>删除</el-button>
				</template>
			</el-table-column> -->
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'sys_node',
  data () {
    return {
      loading: false,
      tableData: [],
      show: false
    }    
  },
  methods: {
    /**
     * 改变数据格式
     */
    changeData (arr) {
      arr.forEach(item => {
        let obj = []
        if(typeof (item.sub) === 'object'){
          for(let i in item.sub){
            item.sub[i] = Object.assign({}, item.sub[i], { edit: { name: false}})
            obj.push(item.sub[i])
          }
          item.sub = obj          
          this.changeData(item.sub)
        }
      })
    },
    /**
     * 获取节点列表
     */
    getSysNode () {
      this.loading = true;
      let arr = []
      this.$http.post('/node/index').then( res => {
        // console.log(res)
        if(res.status === 200){
          if(res.data.msg === 'token过期'){
            this.$store.commit('TOKEN', '');
            this.$router.push('/login')
          }          
          arr = res.data.result;
          if(arr.length){
            this.changeData(arr)
          }
          this.tableData = arr.map(item => {
            item = Object.assign({}, item, { edit: { name: false}})
            return item;
          })
          this.loading = false;
        }
      })
    },

    /**
     * 获取id
     * 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
     */
    getRowKey(row){
      console.log(row)
      return row.id
    },

    /**
     * 修改节点权限
     */
    changeStatus(is_auth,id){
      this.$http.post('/node/edit_is_auth',{
        id,
        is_auth
      }).then( res => {
        this.$message({
            message: res.data.result.msg,
            center: true,
            type: 'success',
            offset:400,
            duration:1000
        });
      })
    },

    /**
     * 刷新节点
     */
    handleRefresh () {
      this.$http.post('/node/refresh').then(res => {
        if(res.status === 200){
          this.$message({
            message: res.data.result.msg,
            center: true,
            type: 'success',
            duration:1000
          });
        }
      })
    },

    /**
     * 设置节点
     */
    setNodeName(row){
      console.log(row)
      this.show = !this.show;
      // row.edit.name=!row.edit.name
      // if(!row.title) {
      //   this.$http.post('/node/name',{
      //     id:row.id,
      //     name:row.title
      //   }).then(res => {
      //     if(res.status === 200){
      //       this.getSysNode()
      //     }
      //   })
      // }      
    },
    // 输入后enter弹起事件
    doblur(e) {
        e.target.blur()
    },
    handleNodeName(row){
      this.$http.post('/node/name',{
        id:row.id,
        name:row.title
      }).then(res => {
        if(res.status === 200){
          this.show = !this.show;
          this.getSysNode();
        }
      })
    }
  },
  mounted () {
    this.getSysNode()
  }
}
</script>
<style lang="less" scoped>
  .table-input {
    .el-input__inner {
      
      outline: none;
    }
  }
</style>